// 总体感觉这个项目带给我的第一个收获就是我对js的作用有了更加深刻的了解
// js可以通过添加或者移除类名附加css的定义来实现转换样式
// 常规操作：选择元素
const progress = document.getElementById('progress')
const prev = document.getElementById('prev')
const next = document.getElementById('next')
const circles = document.querySelectorAll('.circle')

// 设置一个全局变量
// 默认1高亮
let currentActive = 1

// 点击按钮“next”的效果
next.addEventListener('click', () => {
    currentActive++

    if(currentActive > circles.length) {
        currentActive = circles.length
    }

    update()
})

prev.addEventListener('click', () => {
    currentActive--

    if(currentActive < 1) {
        currentActive = 1
    }

    update()
})

// 自定义一个update函数
// 1.处理圆圈的高亮
// 2.处理线条的高亮
// 3.处理按钮的点击状态
function update() {
    circles.forEach((circle, idx) => {
        // 当index小于当前激活时为高亮状态
        // 反之要移除active的类名
        // 注意这个idx是从0开始计数的（就像数组），而cur是从1开始计数的，所以这里是'<'不是'<='
        if(idx < currentActive) {
            circle.classList.add('active')
        } else {
            circle.classList.remove('active')
        }
    })

    const actives = document.querySelectorAll('.active')

    progress.style.width = (actives.length - 1) / (circles.length - 1) * 100 + '%'

    if(currentActive === 1) {
        // 处于第一个时按钮'prev'要禁用，所以disabled为true
        prev.disabled = true
    } else if(currentActive === circles.length) {
        next.disabled = true
        // 处于最后一个的时'next'按钮要禁用
    } else {
        prev.disabled = false
        next.disabled = false
    }
}